<template>
    <div>
        <el-dialog :title="type == 'add' ? '新增' : '修改'" :visible.sync="isShow" width="60%">



            <!-- 表格 -->
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <!-- pid是上级的id 这里用下拉框 选项是上级的名字，选项的值是上级的id -->
                <!-- 下拉框的逻辑：发请求获取options的数据 循环数组生成option -->
                <el-form-item label="角色编号" prop="roleid">
                    <el-select v-model="ruleForm.roleid" placeholder="请选择角色名称">
                        <el-option v-for="(role, index) in roleOptions" :key="index" :label="role.rolename"
                            :value="role.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="ruleForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="ruleForm.password"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-radio-group v-model="ruleForm.status">
                        <el-radio :label="1">正常</el-radio>
                        <el-radio :label="2">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>

            <!-- pid？  title url status type 提交按钮调用接口menuedit或者menuadd -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="isShow = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getRoleList, addUser } from '../../apis'
export default {
    props: ["isfoShow", "type"],
    data() {
        return {
            roleOptions: [],//下拉的数据 获取pid
            isShow: false,
            isEditTo: true,
            //表单数据
            ruleForm: {
                pid: 0,
                title: '',
                icon: '',
                url: '',
                type: 1,
                status: 1
            },
            rules: {
                title: [
                    { required: true, message: '请输入标题', trigger: 'blur' },
                ],
            }
        }
    },
    watch: {
        isfoShow() {
            this.isShow = true;
        },
        edit() {
            this.isEditTo = false
            if (!this.isEditTo) {
                this.info = this.infolist
            }
        }
    },
    //发请求 获取下拉菜单数据
    created() {
        this.getRoleList()
    },
    methods: {
        setVal(data) {
            //给表单项赋值
            // console.log(data);
            this.ruleForm = data
        },
        async getRoleList() {
            let res = await getRoleList();
            console.log(res);
            this.roleOptions = res.list;
        },
        submit() {
            //校验表单  
            this.$refs.ruleForm.validate(async (valid) => {
                if (valid) {//校验成功 提交数据
                    //获取ruleForm数据
                    // console.log(this.ruleForm);
                    //先判断新增还是修改
                    let res;
                    if (this.type == 'add') {
                        res = await addUser(this.ruleForm)
                    } else {
                        res = await editMenu(this.ruleForm)
                    }
                    // console.log(res)
                    if (res.code == 200) {
                        this.$emit('update')
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
            this.isShow = false;
        },
    }
};
</script>

<style>

</style>